<template>
  <el-select
    :value="nameVal"
    :remote-method="remoteMethod"
    :loading="loading"
    filterable
    remote
    reserve-keyword
    placeholder="请输入关键词"
    clearable
    @clear="clearVal"
    @change="valChange"
  >
    <el-option
      v-for="(item, index) in list"
      :key="item.id"
      :label="item.userName"
      :value="item.userName"
    />
  </el-select>
</template>

<script>
import user from '../../api/acl/user.js'

export default {
  name: 'SelectUser',

  props: {
    nameVal: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      name: '',
      // nameVal: '',
      list: [],
      loading: false
    }
  },

  created() {
    this.getList()
  },

  methods: {
    remoteMethod(query) {
      console.log('query: ', query)
      this.loading = true
      this.getList(query)
    },
    getList(query) {
      user
        .listUser({
          userName: query,
          limit: 100,
          page: 1
        })
        .then(response => {
          this.list = response.list
          this.loading = false
        })
    },
    clearVal() {
      this.getList()
      this.$emit('valChange', (this.name = ''))
    },
    valChange(name) {
      console.log('name: ', name)
      this.$emit('valChange', (this.name = name))
    }
  }
}
</script>

<style lang="scss"></style>
